<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rang茶商城</title>
    <link rel="icon" href="../img/logo1.png">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../../js/tools/tea.js"></script>
    <script src="../../js/tools/jquery.min.js"></script>
    <script src="../../js/tools/mock-min.js"></script>
    <script src="../js/compent/index.js"></script>
    <script src="../js/api/indexapi.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.swiper-contione {
				width: 100%;
				height: 947px;
				overflow: hidden;
				margin: 20px auto;
				position: relative;
			}

			.swiper {
				width: 9999999px;
				height: 947px;
				transition: all 1s ease;
			}

			.swiper-item {
				width: 1920px;
				height: 947px;
				float: left;
				position: relative;
			}

			.swiper-item img {
				width: 100%;
				height: 947px;
			}


			.swiper-point {
				width: 100%;
				height: 40px;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}

			.point {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.9);
				margin-right: 5px;
				float: left;
			}

			.point.active {
				background: #fff;
			}

			.swiper-left {
				width: 60px;
				height: 100%;
				position: absolute;
				top: 0;
				left: -60px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.4s ease;
			}

			.swiper-right {
				width: 60px;
				height: 100%;
				position: absolute;
				top: 0;
				right: -60px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.4s ease;
			}

			.swiper-left img,
			.swiper-right img {
				cursor: pointer;
			}

			.swiper-contione:hover .swiper-left {
				left: 0;
			}

			.swiper-contione:hover .swiper-right {
				right: 0;
			}
		</style>
</head>

<body>
    <!-- 头部结束 -->
    <div class="banner">
        <header class="header">
            <div class="navbar clearfloat">
                <div class="navimg left">
                    <img src="../img/logo.webp" alt="">
                </div>
                <div class="nav left">
                    <ul class="navul">
                        <li>
                            <a href="">
                                <span id="thisPage">
                                    首页
                                </span>
                            </a>
                            <div class="underline" id="show"></div>
                        </li>
                        <li>
                            <a href="./about.html">
                                <span>
                                    关于
                                </span>
                            </a>
                            <div class="underline"></div>

                        </li>
                        <li>
                            <a href="./Tea.html">
                                <span>
                                    茶叶
                                </span>
                            </a>
                            <div class="underline"></div>

                        </li>
                        <li>
                            <a href="./base.html">
                                <span>
                                    基地
                                </span>
                            </a>
                            <div class="underline"></div>

                        </li>
                        <li>
                            <a href="./new.html">
                                <span>
                                    新闻
                                </span>
                            </a>
                            <div class="underline"></div>

                        </li>
                        <li>
                            <a href="./assiocate.html">
                                <span>
                                    联系
                                </span>
                            </a>
                            <div class="underline"></div>

                        </li>
                    </ul>
                </div>
                <div class="nav-right right">
                    <div>
                        <a href=""><img src="../img/search.png" alt=""></a>
                    </div>
                    <div>
                        <a href=""><img src="../img/user.png" alt=""></a>
                    </div>
                    <div>
                        <a href="../view/shopcar.html"><img src="../img/shopping cart.png" alt=""></a>
                    </div>
                </div>
            </div>
        </header>
        <!-- <img src="../img/indexBanner.webp" alt=""> -->
        <div class="swiper">
            <div class="swiper-item">
                <img src="../img/indexBanner.webp" style="height: 720px;">
            </div>
            <div class="swiper-item">
                <img src="../img/indexBanner2.webp" style="height: 720px;">
            </div>
        </div>
        <div class="swiper-point">
            <div class="swiper-point-item">
                <div class="point active"></div>
                <div class="point"></div>
            </div>
        </div>
    </div>
    <!-- banner结束 -->

    <div class="qty-title">
        <div class="header-title">新茶上市</div>
        <div class="header-subtitle">Tea Leave</div>
    </div>
    <!-- 标题结束 -->

    <div class="content" id="bigbox">
        <div class="teagood">
            <div class="teaimg">
                <a href="">
                    <img src="../img/hongcha.webp" class="teagoodimg">
                </a>
            </div>
            <div class="teaName">
                <a href="" class="text-name">红茶</a>
            </div>
            <div class="content-underline2"></div>
            <div class="content-underline"></div>
            <div class="teagood-price">
                <span class="text-price">
                    ￥568.0
                </span>
            </div>
        </div>
        <div class="teagood">
            <div class="teaimg">
                <a href="">
                    <img src="../img/hongcha.webp" class="teagoodimg">
                </a>
            </div>
            <div class="teaName">
                <a href="" class="text-name">红茶</a>
            </div>
            <div class="content-underline2"></div>
            <div class="content-underline"></div>

            <div class="teagood-price">
                <span class="text-price">
                    ￥568.0
                </span>
            </div>
        </div>
        <div class="teagood">
            <div class="teaimg">
                <a href="">
                    <img src="../img/hongcha.webp" class="teagoodimg">
                </a>
            </div>
            <div class="teaName">
                <a href="" class="text-name">红茶</a>
            </div>
            <div class="content-underline2"></div>
            <div class="content-underline"></div>

            <div class="teagood-price">
                <span class="text-price">
                    ￥568.0
                </span>
            </div>
        </div>
        <div class="teagood">
            <div class="teaimg">
                <a href="">
                    <img src="../img/hongcha.webp" class="teagoodimg">
                </a>
            </div>
            <div class="teaName">
                <a href="" class="text-name">红茶</a>
            </div>
            <div class="content-underline2"></div>
            <div class="content-underline"></div>

            <div class="teagood-price">
                <span class="text-price">
                    ￥568.0
                </span>
            </div>
        </div>
        <div class="teagood">
            <div class="teaimg">
                <a href="">
                    <img src="../img/hongcha.webp" class="teagoodimg">
                </a>
            </div>
            <div class="teaName">
                <a href="" class="text-name">红茶</a>
            </div>
            <div class="content-underline2"></div>
            <div class="content-underline"></div>

            <div class="teagood-price">
                <span class="text-price">
                    ￥568.0
                </span>
            </div>
        </div>
        <div class="teagood">
            <div class="teaimg">
                <a href="">
                    <img src="../img/hongcha.webp" class="teagoodimg">
                </a>
            </div>
            <div class="teaName">
                <a href="" class="text-name">红茶</a>
            </div>
            <div class="content-underline2"></div>
            <div class="content-underline"></div>

            <div class="teagood-price">
                <span class="text-price">
                    ￥568.0
                </span>
            </div>
        </div>
    </div>
    <!-- 内容结束 -->

    <!-- 按钮 -->
    <div class="button">
        <div class="button-con">
            <a href="">
                →
            </a>
        </div>
    </div>
    <!-- 按钮结束 -->

    <div class="about">
        <div class="about-con">
            <div class="about-text">
                <div class="about-title">关于我们</div>
                <div class="about-subtitle">About</div>
            </div>
            <div class="about-con-main">
                <div class="main-right">
                    <img src="../img/main-con.webp" alt="">
                </div>
                <div class="main-left">
                    <div class="main-left-text">
                        <span>茶叶源于中国，茶叶最早是被作为祭品使用的。但从春秋后期就被人们作为菜食，在西汉中期发展为药用，西汉后期才发展为宫廷高级饮料，普及民间作为普通饮料那是西晋以后的事。发现最早人工种植茶叶的遗迹在浙江余姚的田螺山遗址，
                            已有6000多年的历史。饮茶始于中国。</span>
                    </div>
                    <div class="main-button">了解更多</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 图片附着结束 -->

    <div class="somelogo">
        <div class="somelogo-ico">
            <div class="somelogo-img">
                <img src="../img/somelogo1.webp" alt="">
            </div>
            <div class="somelogo-img">
                <img src="../img/somelogo2.webp" alt="">
            </div>
            <div class="somelogo-img">
                <img src="../img/somelogo3.webp" alt="">
            </div>
            <div class="somelogo-img">
                <img src="../img/somelogo4.webp" alt="">
            </div>
            <div class="somelogo-img">
                <img src="../img/somelogo5.webp" alt="">
            </div>
            <div class="somelogo-img">
                <img src="../img/somelogo6.webp" alt="">
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer class="footer">
        <div class="footer-bgc">

            <div class="fu-left">
                <div class="child-left">
                    <div class="left-title-qte">
                        <div class="bigtitle">联系</div>
                        <div class="header-subtitle1">Contact</div>
                    </div>
                    <div class="left-title-qte2">

                        <div class="fu-top">
                            <div class="child-top">
                                <span>
                                    关注我们
                                </span>
                            </div>
                        </div>

                        <ul class="footer-ul">
                            <li>
                                <span>
                                    <img src="../img/wechat.png" alt="">
                                </span>
                            </li>
                            <li>
                                <span>
                                    <img src="../img/weibo.png" alt="">
                                </span>
                            </li>
                        </ul>

                    </div>

                    <div class="qty-column">
                        <div class="qty-colum-title">
                            <div>
                                <span>
                                    起飞页自助建站平台
                                </span>
                            </div>
                        </div>
                        <div class="qty-mess">
                            <span>
                                地址：苏州市建外SOHO东区2号楼
                            </span>
                        </div>
                        <div class="qty-mess">
                            <span>
                                邮编：100000
                            </span>
                        </div>
                        <div class="qty-mess">
                            <span>
                                电话：010-69557550
                            </span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="fu-right">
                <div class="child-right">
                    <div class="ma">
                        <div class="ma-img">
                            <img src="../img/wechatma.webp" alt="">
                        </div>
                        <div class="ma-text">
                            <div>
                                <span>
                                    微信
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="ma">
                        <div class="ma-img">
                            <img src="../img/weiboma.webp" alt="">
                        </div>
                        <div class="ma-text">
                            <div>
                                <span>
                                    微博
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-footer">
            <div>
                <span>

                    COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号
                </span>
            </div>
        </div>
    </footer>
    <!-- footer -->
</body>

<script type="text/javascript">
    class Swiper {
        constructor() {
            this.w = $('.swiper-item').width();
            this.num = 0;
            this.len = $('.swiper .swiper-item').length - 1;
            this.timer = null;
        }
        init() {
            //设置定时器
            this.setTime();
            //滑上停止定时器
            this.hover();
            //点击指示
            this.pointClick();
            //点击左右箭头
            this.lrClick();
        }
        setTime() {
            this.timer = setInterval(() => {
                this.num++;	
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({transform: `translateX(${cssTrx}px)`})
            }, 3000)
        }
        hover() {
            $('.swiper-contione').hover(() => {
                clearInterval(this.timer)
            }, () => {
                this.setTime();
            });
        }
        pointClick() {
            let that = this;
            $('.swiper-point-item .point').click(function() {
                that.num = $(this).index();
                let cssTrx = -that.num * that.w;
                $(this).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
        lrClick() {
            $('.swiper-left img').click(() => {
                this.num--;
                if (this.num < 0) {
                    this.num = this.len;
                };
                console.log(this.num)
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            });
            
            $('.swiper-right img').click(() => {
                this.num++;
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
    }
    let sw = new Swiper();
    sw.init();
</script>
</html>